<script setup>
import router from "@/router";
import { onMounted, onUnmounted, ref } from "vue";
import useHomeStroe from "@/stores/home";
import { storeToRefs } from "pinia";

const inputVal = ref();
// 请求数据
const homeStore = useHomeStroe();
const { hotDatas } = storeToRefs(homeStore);
</script>

<template>
  <div class="serach-warpper">
    <div class="sw-date">
      <div class="item left">
        <span class="text">入住</span>
        <span>03-20</span>
      </div>
      <div class="item center">共1晚</div>
      <div class="item right">
        <span class="text">离店</span>
        <span>03-20</span>
      </div>
    </div>
    <div class="sw-price">
      <span class="text">价格不限</span>
      <span class="text">人数不限</span>
    </div>
    <div class="sw-input">
      <van-search left-icon="" v-model="inputVal" placeholder="关键词/位置/民宿名" />
    </div>
    <div class="sw-hotcity">
      <template v-for="item in hotDatas " :key="item">
        <div class="item">{{item.tagText.text}}</div>
      </template>
    </div>
    <div class="sw-btn">
      <div>开始搜索</div>
    </div>
  </div>
</template>
<style lang="less">
.serach-warpper {
  .sw-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    .item {
      display: flex;
      flex-direction: column;
      color: #333;
    }
  }
  .text {
    color: #999;
    padding-bottom: 5px;
  }
  .sw-price {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
  }
  .sw-input {
    // margin: 0 -10px;
  }
  .sw-btn {
    display: flex;
    justify-content: center;
    div {
      width: 342px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      font-weight: 500;
      font-size: 18px;
      color: #fff;
      border-radius: 20px;
      background-image: var(--theme-linear-gradient);
    }
  }
  .sw-hotcity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 20px;
    height: auto;
    color: #3f4954;
    margin: 10px 0;
    .item {
      margin: 4px;
      background: #f1f3f5;
      padding: 4px 8px;
      border-radius: 14px;
      font-size: 12px;
      line-height: 1;
    }
  }
}
</style>